<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/Role.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/Rotation.css">
</head>

<body>
    <div class="load"></div>
    <!-- 背景轮播 -->
    <div id="slide">
        <div id="div1"><img src="./images/BIGBG_1.jpg" class="img_lun"></img>
        </div>

        <div id="div2"><img src="./images/BIGBG_2.jpg" class="img_lun"></img>
        </div>

        <div id="div3"><img src="./images/BIGBG_1.jpg" class="img_lun"></img>
        </div>

        <div id="div4"><img src="./images/BIGBG_2.jpg" class="img_lun"></img>
        </div>
    </div>
    <audio src="./video/BGM.mp3" controls autoplay style="display: none;"></audio>
    <header class="clearfix">
        <div class="header_left">
            <div class="header_line"></div>
            <div class="header_one">
                <ul>
                    <li class="music">
                        <i class="">
                            <img src="./images/stop.png" alt="" style="width: 30px;height: 30px;" class="music_stopsb">
                        </i>
                        <audio src="./video/BGM.mp3" autoplay controls style="display: none;"></audio>
                    </li>
                    <li>
                        <a href="#"><img src="./images/yuanshen_logo.png" alt=""></a>
                    </li>
                    <li class="as home"><a href="#">首页</a></li>
                    <li class="as news"><a href="#">新闻</a></li>
                    <li class="as Roles selecta"><a href="#">角色</a></li>
                    <li class="as world"><a href="#">世界</a></li>
                    <li class="as manhua"><a href="#">漫画</a></li>
                    <li class="as shequ"><a href="#">社区</a></li>
                </ul>
            </div>
        </div>
        <div class="header_right">
            <span>
                <a href="#" class="User">登&nbsp录</a>
                <img src="" alt="" class="iconfont icon-yonghu">
            </span>
        </div>
    </header>

    <!-- 登录 -->
    <div class="Sing_big clearfix">
        <div class="sign_logo"><img src="./images/MIlogo.png" alt=""></div>
        <div class="Sign clearfix">
            <strong class="close_nav">X</strong>
            <ul>
                <li class="message">短信登录</li>
                <li class="password" style="color: black;">密码登录</li>
            </ul>
            <div class="xian"></div>
            <div class="sign_nav clearfix">
                <div class="message_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号登录/注册"
                        autocomplete="off">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="text" name="" id="account" class="telephone" maxlength="4" placeholder="验证码"
                        autocomplete="off">
                    <p id="account_x"></p>
                    <i class="shu">|</i>
                    <input type="button" name="" id="" class="Verification" value="获取验证码" autocomplete="off">
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
                <div class="password_nav message_nav_one">
                    <input type="text" name="" id="telephone_one" class="telephone" maxlength="11"
                        placeholder="手机号/邮箱/用户名" autocomplete="off">
                    <p id="tel_x_one"></p>
                    <span></span>
                    <input type="password" name="" id="account_one" class="telephone" maxlength="16" placeholder="密码"
                        autocomplete="off">
                    <p id="account_x_one"></p>
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航 -->
    <div class="Navigation clearfix">
        <ul>
            <li class="Navigation_one Navigation_BG"><img src="./images/dian.png" alt="" class="one_img"><span
                    class="one_span">蒙德城</span></li>
            <li class="Navigation_two"><img src="./images/dian.png" alt="" class="two_img"><span
                    class="two_span">璃月港</span></li>
            <li><img src="./images/dian.png" alt=""><span>敬请期待</span></li>
        </ul>
    </div>
    <!-- 人物页面 -->
    <div class="Nav_one clearfix">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_1.png" alt="" class="attribute">
                        <div class="person wow bounceInLeft bg-green animated">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/琴_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="qing_name">CV: 林簌</p>
                                    <img src="./images/talk.png" alt="" class="qing_talk">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch qings"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <audio src="./video/1.mp3" controls style="display: none;" id="qing_music"></audio>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>活泼率直的少女，是蒙德城中唯一的侦察骑士。<br> 擅长使用风之翼的安柏，连续三年蝉联蒙德城的「飞行冠军」。
                                            <br> 作为西风骑士团的新星，今天的安柏依然活跃在第一线。
                                        </p>
                                        </p>
                                        <img src="./images/琴_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role wow bounceInRight bg-yellow animated">
                            <img src="./images/琴.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>


                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_2.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/安柏_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="anbai">CV: 安柏</p>
                                    <img src="./images/talk.png" alt="" class="an_talk">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <audio src="./video/3.mp3" controls style="display: none;" id="an_music"></audio>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/安柏_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/安柏.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_3.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/丽莎_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="lisha">CV: 丽莎</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/丽莎_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/丽莎.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_5.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/凯亚_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="kaiya">CV: 孙晔</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/凯亚_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/凯亚.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_2.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/巴啦啦_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="bll">CV: 宋媛媛</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/巴啦啦_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/巴啦啦.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_1.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/迪卢克_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="dlk">CV: 马洋</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/迪卢克_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/迪卢克.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_5.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/雷泽_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="lz">CV: 周帅</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/雷泽_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/雷泽.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_4.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/温油_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="wd">CV: 喵☆酱</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/温油_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/温油.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_3.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/可莉_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="kd">CV: 花玲</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/可莉_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/可莉.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_5.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/班尼特_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="bnt">CV: 穆雪婷</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/班尼特_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/班尼特.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_3.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/若埃尔_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="rae">CV: 宴宁</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/若埃尔_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/若埃尔.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_1.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/菲谢尔_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="fxe">CV: Mace&李元韬</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/菲谢尔_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/菲谢尔.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_2.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/砂糖_perosn.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="xg">CV: 小敢</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/砂糖_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/砂糖.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
                <div class="swiper-slide">
                    <!-- 人物页面开始 -->
                    <div class="Nav_person" id="person_one">
                        <img src="./images/shuxin_3.png" alt="" class="attribute">
                        <div class="person">
                            <ul>
                                <li class="person_line"></li>
                                <li><img src="./images/莫娜_person.png" alt=""></li>
                                <li class="talk">
                                    <img src="./images/person.jpg" alt="">
                                    <p class="mn">CV: 陈婷婷</p>
                                    <img src="./images/talk.png" alt="" class="talk_control">

                                    <div class="star_talk">
                                        <ul class="click_talk">
                                            <li class="chinese">中</li>
                                            <li class="switch"></li>
                                            <li class="japan">日</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="brief">
                                    <div>
                                        <i><img src="./images/smallD.png" alt=""></i>
                                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁。虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。<br>
                                            当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。
                                        </p>
                                        <img src="./images/莫娜_font.png" alt="" class="person_font">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="person_role">
                            <img src="./images/莫娜.png" alt="">
                        </div>
                    </div>
                    <!-- 人物页面结束 -->
                </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <!-- <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
            </div>
        </div> -->
    </div>

    <!-- 人物缩略图 -->
    <div class="person_thumbnail swiper-container gallery-thumbs clearfix person_thumbnail_one">
        <ul class="swiper-wrapper">
            <li class="swiper-slide next_li">
                <img src="./images/琴_1.png" alt="">
                <p>琴</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/安柏_1.png" alt="">
                <p>安柏</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/丽莎_1.png" alt="">
                <p>丽莎</p>
            </li>

            <li class="swiper-slide next_li">
                <img src="./images/凯亚_1.png" alt="">
                <p>凯亚</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/巴啦啦_1.png" alt="">
                <p>芭芭拉</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/迪卢克_1.png" alt="">
                <p>迪卢克</p>
            </li>

            <li class="swiper-slide next_li">
                <img src="./images/雷泽_1.png" alt="">
                <p>雷泽</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/温油_1.png" alt="">
                <p>温迪</p>
            </li>

            <li class="swiper-slide next_li">
                <img src="./images/可莉_1.png" alt="">
                <p>可莉</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/班尼特_1.png" alt="">
                <p>班尼特</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/若埃尔_1.png" alt="">
                <p>诺艾尔</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/菲谢尔_1.png" alt="">
                <p>菲谢尔</p>
            </li>


            <li class="swiper-slide next_li">
                <img src="./images/砂糖_1.png" alt="">
                <p>砂糖</p>
            </li>
            <li class="swiper-slide next_li">
                <img src="./images/莫娜_1.png" alt="">
                <p>莫娜</p>
            </li>
        </ul>
        <!-- <div class="Left_btn swiper-button-prev"><img src="./images/person_left.png" alt=""></div>
        <div class="Right_btn swiper-button-next"><img src="./images/person_right.png" alt=""></div> -->
        <!-- <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div> -->

    </div>


    <!-- footer -->
    <footer class="footer">
        <ul class="footer_socialbar">
            <li class="footer_item weibo"></li>
            <li class="footer_item qq"></li>
            <li class="footer_item weixin"></li>
            <li class="footer_item share">
            </li>
        </ul>
        <div class="share_wrap">
            <p>分享至</p>
            <ul style="margin-left: 34px;">
                <li style="background-position: -74px -74px;"></li>
                <li style="background-position: -74px -10px;"></li>
                <li style="background-position: -138px -138px;"></li>
                <li style="background-position: -10px -138px;"></li>
            </ul>
        </div>
        <div id="footer_top">
            <div>
                <div class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo">
                    <div class="footer_content">
                        <div class="footer_logo">
                            <ul>
                                <li>
                                    <div style="display: flex; align-items: center;">
                                        <img src="./images/footer-mihoyo.png" style="width: auto;height: 42px;">
                                        <span></span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="./images/footer-logo.png" style="width: 110px;height: auto;">
                                    </div>
                                </li>
                            </ul>


                        </div>
                        <div class="footer_info">
                            <div class="footer_link">
                                <div class="footer_protocol">
                                    <div>
                                        <a href="https://ys.mihoyo.com/company/agreement" class="protocol"
                                            target="_blank">用户协议</a>
                                        |
                                        <a href="https://ys.mihoyo.com/company/privacy" class="protocol"
                                            target="_blank">隐私政策</a>
                                        |
                                        <a href="https://jiazhang.mihoyo.com/#/" class="protocol"
                                            target="_blank">家长监护工程</a>
                                        |
                                        <a href="http://www.mihayou.com/company.html" target="_blank"
                                            class="about-us protocol">关于我们</a>
                                        |
                                        <a href="http://www.mihayou.com/contact.html" target="_blank"
                                            class="contract-us protocol">联系我们</a>
                                        |
                                        <a href="http://www.mihayou.com/add.html" target="_blank"
                                            class="join-us protocol">加入我们</a>

                                    </div>
                                </div>

                            </div>

                            <div class="footer_advice">
                                <p class="advice_info">
                                    健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                                </p>
                                <div class="inline_info">
                                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113"
                                        class="footer-filing-item" target="_blank">沪公网安备31010402001113号</a>
                                    <span class="split_line"> | </span>
                                    <span class="footer_filing_item">增值电信业务经营许可证：沪B2-20190555</span>
                                </div>

                            </div>

                            <div class="footer_filing">
                                <div class="footer_filing_content">
                                    <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
                                        class="footer-filing-item">沪ICP备19018275号-4</a>
                                    <span class="split_line"> | </span>
                                    <span> 沪网文〔2019〕3168-216号 </span>
                                    <span class="split_line"> | </span>
                                    <span>国新出审【2019】2978号</span>
                                </div>
                                <div class="footer_filing_tip">
                                    <span>互联网违法不良信息举报邮箱: tousu@mihoyo.com </span>
                                    <span>互联网违法不良信息举报电话: 021-34203135 （工作时间：每天10点 - 20点）</span>
                                </div>
                            </div>

                            <div class="footer-tip">
                                亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                            </div>

                            <div class="mihoyo-copyright">©2012-2020 上海米哈游影铁科技有限公司版权所有</div>

                            <div class="footer_icon">
                                <a href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020"
                                    target="_blank"><img src="./images/footer-icon1.png" alt=""></a>
                                <a href="http://www.shjbzx.cn/" target="_blank"><img src="./images/footer-icon2.png"
                                        alt=""></a>
                                <a href="https://www.12377.cn/" target="_blank"><img src="./images/footer-icon3.png"
                                        alt=""></a>
                                <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F"
                                    target="_blank"><img src="./images/footer-icon4.png" alt=""></a>
                                <a href="#" target="_blank"><img src="./images/footer-icon5.png" alt=""></a>
                                <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t"
                                    target="_blank"><img src="./images/footer-icon6.png" alt=""></a>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </footer>
</body>

</html>
<script src="./js/wow.min.js"></script>
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/Rotation.js"></script>
<script src="./js/Role.js"></script>
<script>
    $(function () {

        new WOW().init();
        //音乐开启关闭
        $(".home").click(function () {
            $(".load").show()
            $(".load").append(`<div class="loading"></div>`)
            setTimeout(function () {
                window.location.href = "Home.html";
            }, 5000)
        })

        $(".news").click(function () {
            $(".load").show()
            $(".load").append(`<div class="loading"></div>`)
            setTimeout(function () {
                window.location.href = "News.html";
            }, 5000)
        })


        $(".Roles").click(function () {
            $(".load").show()
            $(".load").append(`<div class="loading"></div>`)
            setTimeout(function () {
                window.location.href = "Role.html";
            }, 5000)
        })


        $(".world").click(function () {
            $(".load").show()
            $(".load").append(`<div class="loading"></div>`)
            setTimeout(function () {
                window.location.href = "World.html";
            }, 5000)
        })

        $(".manhua").click(function () {
            $(".load").show()
            $(".load").append(`<div class="loading"></div>`)
            setTimeout(function () {
                window.location.href = "manga_index.html";
            }, 5000)
        })
        var music = document.querySelector("audio");
        $(".music").click(function () {

            if (music.paused) {
                music.play();
                $(".music_stopsb").attr("src", "./images/music.png")

            } else {
                music.pause();
                $(".music_stopsb").attr("src", "./images/stop.png")
            }
        })


        //登录触动变色
        $(".header_right span").mousemove(function () {
            $(".User").css("color", "white")
            $(".iconfont .icon-yonghu").css("color", "red")
        })

        $(".header_right span").mouseleave(function () {
            $(".User").css("color", "#ccc")
            $(".iconfont .icon-yonghu").css("color", "red")
        })


        // 线条移动
        $(".message").click(function () {
            $(".xian").css("left", "120px")
            $(".message_nav").show();
            $(".password_nav").hide();
            $(".message").css("color", " #ce965f")
            $(".password").css("color", "black")
        })

        $(".password").click(function () {
            $(".xian").css("left", "305px")
            $(".password_nav").show();
            $(".message_nav").hide();
            $(".password").css("color", " #ce965f")
            $(".message").css("color", "black")
        })


        //正则验证
        function phoneverification() {
            var phone = document.getElementById('telephone').value;
            if (!(/^1[34578]\d{9}$/.test(phone))) {
                $("#telephone").css("color", "red")
                $(".message_nav>span").text("*手机格式错误");
                return false
            } else {
                $("#telephone").css("color", "black")
                $(".message_nav>span").text("");
                return false
            }

            if (phone == "") {
                $(".message_nav>span").text("*手机号不能为空");
                return false
            }
        }

        // 输入框点击时动画
        $("#telephone").focus(function () {
            $("#tel_x").css("width", "296px");
            $("#account_x").css("width", "0px");
            var phone = document.getElementById('telephone').value;

            phoneverification();

        })

        // 输入框点击时动画
        $("#account").focus(function () {

            $("#tel_x").css("width", "0px");
            // Verification
            $("#account_x").css("width", "296px");
            var phone = document.getElementById('telephone').value;
            phoneverification();
        })

        $("#telephone_one").focus(function () {
            $("#tel_x_one").css("width", "296px");
            $("#account_x_one").css("width", "0px");
            var phone = document.getElementById('telephone').value;
            phoneverification();
        })

        // 输入框点击时动画
        $("#account_one").focus(function () {
            $("#tel_x_one").css("width", "0px");
            // Verification
            $("#account_x_one").css("width", "296px");
            var phone = document.getElementById('telephone').value;
            phoneverification();
        })
        //登录按钮
        $(".login").click(function () {
            phoneverification();
        })

        //获取验证码
        var count = 60;
        $(".Verification").click(function () {
            //正则验证
            var phone = document.getElementById('telephone').value;
            if (!(/^1[34578]\d{9}$/.test(phone))) {
                $("#telephone").css("color", "red")
                $(".message_nav>span").text("*手机格式错误");
                return false
            } else {
                $("#telephone").css("color", "black")
                $(".message_nav>span").text("");
            }

            if (phone == "") {
                $(".message_nav>span").text("*手机号不能为空");
                return false
            }

            //倒计时
            $(".Verification").attr("disabled", "disabled"); //点击一次不可再点
            var interval = setInterval(function () { //定义定时器
                $(".Verification").val("已发送" + "(" + count + ")");
                count--;
                if (count == 0) {
                    clearInterval(interval); //清除定时器
                    $(".Verification").val("重新获取验证码");
                    $(".Verification").removeAttr("disabled"); //删除这个属性
                    count = 60;
                }
            }, 1000);
        })


        $(".User").click(function () {
            $(".Sing_big ").show();
        })
        $(".close_nav").click(function () {
            $(".Sing_big").hide();
        })


        //背景图片淡入淡出
        var i = 0;
        window.reverse = false; //默认为正序播放
        $(document).ready(function () {
            picGroup = [$("#div1 "), $("#div2 "), $("#div3 "), $("#div4 ")];
            addlistener();
            ID = setInterval(show1, 2000);

        });

        function nextPicIndex() //对全局边量i进行更改，改为当前博播放顺序下的下一张图片索引
        {
            if (reverse == true) {
                if (i > 0) {
                    i--;
                } else {
                    i = 4 - 1;
                }
            } else {
                if (i < 3) {
                    i++;
                } else {
                    i = 0;
                }
            }
        }

        function show1() {
            picGroup[i].fadeToggle(2000);
            nextPicIndex();
            picGroup[i].fadeToggle(2000);
        }

        function addlistener() {
            $("#slide ").bind("mousedown ", start);
        }

        function start(event) {
            if (event.button == 0) //当鼠标左键还是按下状态时
            {
                X = event.pageX;
                Y = event.pageY;
                $("#slide ").bind("mousemove ", move);
                $("#slide ").bind("mouseup ", stop);
            }
            return false; //很关键，取消执行浏览器默认事件，没有这一步，该事件执行不了
        }

        function move(event) {
            X1 = event.pageX;
            Y1 = event.pageY;
            return false; //同样取消浏览器默认事件
        }

        function stop() {
            if (X1 - X > 50) //滑动路程大于50，且为向右滑动
            {
                reverse = false; //正序
                clearInterval(ID); //停止当前的interval
                show1(); //立即执行一次图片下一张播放
                ID = setInterval(show1, 4000); //重新开启interval
            } else if (X1 - X < -50) //滑动路程大于50，且为向左滑动
            {
                reverse = true; //反序
                clearInterval(ID);
                show1();
                ID = setInterval(show1, 4000);
            }
            $("#slide ").unbind("mousemove ", move); //左键松开，则接除绑定鼠标移动事件
            $("#slide ").unbind("mouseup ", stop); //和左键松开事件
        }

        $(".Navigation_one").click(function () {
            $(".Nav_one").show();
            $(".Nav_two").hide();
            $(".Navigation_one").addClass("Navigation_BG");
            $(".Navigation_two").removeClass("Navigation_BG");
            $(".one_img").css("opacity", "0");
            $(".two_img").css("opacity", "1");
            $(".one_span").css("margin-left", "50px")
            $(".two_span").css("margin-left", "30px")
        })


        $(".Navigation_two").click(function () {
            $(".Nav_one").hide();
            $(".Nav_two").show();
            $(".Navigation_two").addClass("Navigation_BG");
            $(".Navigation_one").removeClass("Navigation_BG");
            $(".two_img").css("opacity", "0");
            $(".one_img").css("opacity", "1");
            $(".two_span").css("margin-left", "50px")
            $(".one_span").css("margin-left", "30px")
        })

        var flag = true;
        $(".click_talk").click(function () {
            if (flag) {
                $(".switch").css("left", "2px")
                flag = false;
            } else {
                $(".switch").css("left", "59px")
                flag = true;
            }
        })

        // 页面轮播
        var galleryTop = new Swiper('.gallery-top', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 10,
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;

        $(".swiper-button-next").click(function () {
            $(".person").addClass("wow bounceInLeft bg-green animated");
            $(".person_role").addClass("wow bounceInRight bg-yellow animated");
            setTimeout(function () {
                $(".person").removeClass("wow bounceInLeft bg-green animated");
                $(".person_role").removeClass("wow bounceInRight bg-yellow animated");
            }, 1000)
        })

        $(".swiper-button-prev").click(function () {
            $(".person").addClass("wow bounceInLeft bg-green animated");
            $(".person_role").addClass("wow bounceInRight bg-yellow animated");
            setTimeout(function () {
                $(".person").removeClass("wow bounceInLeft bg-green animated");
                $(".person_role").removeClass("wow bounceInRight bg-yellow animated");
            }, 1000)
        })
        $(".next_li").click(function () {
            $(".person").addClass("wow bounceInLeft bg-green animated");
            $(".person_role").addClass("wow bounceInRight bg-yellow animated");
            setTimeout(function () {
                $(".person").removeClass("wow bounceInLeft bg-green animated");
                $(".person_role").removeClass("wow bounceInRight bg-yellow animated");
            }, 1000)
        })


        // 头部跟踪

        $(".home").mousemove(function () {
            $(".header_line ").css("left", "460px")
        })

        $(".home").mouseout(function () {
            $(".header_line ").css("left", "630px")
        })
        $(".news").mousemove(function () {
            $(".header_line ").css("left", "545px")
        })

        $(".news").mouseout(function () {
            $(".header_line ").css("left", "630px")
        })


        $(".Roles").mousemove(function () {
            $(".header_line ").css("left", "630px")
        })

        $(".Roles").mouseout(function () {
            $(".header_line ").css("left", "630px")
        })


        $(".world").mousemove(function () {
            $(".header_line ").css("left", "715px")
        })

        $(".world").mouseout(function () {
            $(".header_line ").css("left", "630px")
        })


        $(".manhua").mousemove(function () {
            $(".header_line ").css("left", "802px")
        })

        $(".manhua").mouseout(function () {
            $(".header_line ").css("left", "630px")
        })

        $(".shequ").mousemove(function () {
            $(".header_line ").css("left", "888px")
        })

        $(".shequ").mouseout(function () {
            $(".header_line ").css("left", "630px")
        })


        $('.share_wrap').mouseover(function () {
            $('.share_wrap').show()
        }).mouseout(function () {
            $('.share_wrap').hide()
        })

        $('.share').mouseover(function () {
            $('.share_wrap').fadeIn()
        }).mouseout(function () {
            var flag = $('.share_wrap').show()
            if (!flag) {
                $('.share_wrap').hide()
            }
        })
    })
</script>